<template>
  <div>
    <input type="text" v-model="name" @keydown.enter="add(5)">
    <input type="text" :value="name" @input="name = $event.target.value">
    <h2 v-for="item in ary" :key="item" class="qqq" :class="{ box: name.length > 3 }">{{ name }}
    </h2>
    <div :style="{ color: 'red' }">666</div>
    <button @click="add(10, $event)">+</button>
  </div>
</template>
<script>
export default {
  name: 'XXX',
  data() {
    // this 当前实例
    return {
      // 这里边的属性 最终都会变成当前实例的私有属性
      name: 100,
      cla: "box",
      ary: [1]
    }
  },
  methods: {
    // methods中的方法 不能写成箭头函数；
    // 里边的函数中的this都是当前实例
    // 这里边的属性 最终都会变成当前实例的私有属性
    add(n, e) {
      // 
      console.log(n, e)
      this.name++
    },
  },
  components: {

  }
}
// @ is an alias to /src
/* 
  key  是用来提升虚拟DOM的diff算法效率的  同层比较
    虚拟DOM: 使用JS对象模拟真实DOM
    {
      tag:'div',
      children:[
        {
          tag:input
        },
        {
          tag:'h2'
        }
      ]
    }

    {
      tag:'div',
      children:[
        {
          tag:input
        },
        {
          tag:'h2'
        },
        {
          tag:'h2'
        }
      ]
    }


  v-bind  专门用来处理行内属性的一个指令  简写 ：
    这个指令在处理 class和style专门做过加强

  v-on 专门用来处理事件的一个指令  简写 @  
    事件修饰符 
    @click.stop='fn'  //阻止冒泡
    @click.prevent='fn'  //阻止默认事件
    @click.self = 'fn' // 只有点击自己的时候才会触发 冒泡触发不了这个执行

  v-model的修饰符： v-model.lazy     v-model.number  v-model.trim
    v-model 是 :value 和 @input 结合体
    v-model.lazy  把input事件改成了 change事件
     v-model.number 把input的内容使用parseFloat转成数字， 转成NaN的就不转了
     v-model.trim  去除尾首空格的
  
  v-bind的修饰符  .sync 说组建的时候 在讲
  按键修饰符 
    @keydown.enter="add(5)"  敲回车触发后边的函数
*/
</script>
<style lang="less">
</style>